{% extends "base.html" %}

{% block title %}Create School | Service Performance Reporting Portal{% endblock %}

{% block extra_css %}
<style>
    .page-header {
        margin-bottom: 28px;
    }

    .page-title {
        margin: 0;
        font-size: 28px;
        font-weight: 700;
        color: #1f2933;
    }

    .page-subtitle {
        margin: 8px 0 0;
        color: #6b7280;
        font-size: 14px;
    }

    .form-wrapper {
        max-width: 850px;
    }

    .form-card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 14px;
        padding: 32px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    }

    .section-title {
        margin: 0 0 6px;
        font-size: 18px;
        font-weight: 700;
        color: #1f2933;
    }

    .section-description {
        margin: 0 0 26px;
        color: #6b7280;
        font-size: 14px;
        line-height: 1.6;
    }

    .info-box {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        background: #f3f7fa;
        border-left: 4px solid #1f2933;
        border-radius: 8px;
        padding: 15px 16px;
        margin-bottom: 28px;
    }

    .info-box i {
        margin-top: 2px;
        color: #1f2933;
        font-size: 16px;
    }

    .info-box p {
        margin: 0;
        color: #4b5563;
        font-size: 13px;
        line-height: 1.6;
    }

    .form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

    .form-group {
        display: flex;
        flex-direction: column;
    }

    .form-group.full-width {
        grid-column: 1 / -1;
    }

    .form-label {
        margin-bottom: 8px;
        color: #374151;
        font-size: 13px;
        font-weight: 600;
    }

    .required {
        color: #b91c1c;
    }

    .form-control {
        width: 100%;
        padding: 12px 14px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        background: #ffffff;
        color: #1f2933;
        font-family: "Poppins", Arial, sans-serif;
        font-size: 14px;
        outline: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .form-control:focus {
        border-color: #1f2933;
        box-shadow: 0 0 0 3px rgba(31, 41, 51, 0.08);
    }

    .form-control::placeholder {
        color: #9ca3af;
    }

    .field-help {
        margin-top: 6px;
        color: #6b7280;
        font-size: 12px;
        line-height: 1.5;
    }

    .form-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
        margin-top: 30px;
        padding-top: 24px;
        border-top: 1px solid #e5e7eb;
    }

    .btn-secondary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 11px 18px;
        border-radius: 8px;
        border: 1px solid #d1d5db;
        background: #ffffff;
        color: #374151;
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        transition: 0.2s ease;
    }

    .btn-secondary:hover {
        background: #f9fafb;
        border-color: #9ca3af;
    }

    .btn-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 11px 20px;
        border: none;
        border-radius: 8px;
        background: #1f2933;
        color: #ffffff;
        font-family: "Poppins", Arial, sans-serif;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: 0.2s ease;
    }

    .btn-primary:hover {
        background: #111827;
    }

    @media (max-width: 700px) {
        .form-card {
            padding: 22px;
        }

        .form-grid {
            grid-template-columns: 1fr;
        }

        .form-group.full-width {
            grid-column: auto;
        }

        .form-actions {
            flex-direction: column-reverse;
            align-items: stretch;
        }

        .btn-primary,
        .btn-secondary {
            width: 100%;
        }
    }
</style>
{% endblock %}

{% block content %}

<div class="page-header">
    <h1 class="page-title">Create School</h1>

    <p class="page-subtitle">
        Create a school and its login account for the Service Performance Reporting Portal.
    </p>
</div>

<div class="form-wrapper">

    <div class="form-card">

        <h2 class="section-title">School Details</h2>

        <p class="section-description">
            Enter the school's information below. A school login account will be created
            automatically and linked to the school.
        </p>

        <div class="info-box">
            <i class="fa-solid fa-circle-info"></i>

            <p>
                A temporary password will be generated automatically after the school is
                created. The school must use the temporary password to log in for the first
                time and will then be required to create a new password.
            </p>
        </div>

        <form method="POST" action="{{ url_for('create_school') }}">

            {{ csrf_token() }}

            <div class="form-grid">

                <div class="form-group full-width">
                    <label class="form-label" for="school_name">
                        School Name <span class="required">*</span>
                    </label>

                    <input
                        type="text"
                        id="school_name"
                        name="school_name"
                        class="form-control"
                        placeholder="Enter the school's full name"
                        value="{{ request.form.get('school_name', '') }}"
                        maxlength="200"
                        required
                    >
                </div>

                <div class="form-group">
                    <label class="form-label" for="username">
                        School Username <span class="required">*</span>
                    </label>

                    <input
                        type="text"
                        id="username"
                        name="username"
                        class="form-control"
                        placeholder="e.g. masentlehigh"
                        value="{{ request.form.get('username', '') }}"
                        maxlength="100"
                        autocomplete="off"
                        required
                    >

                    <span class="field-help">
                        This username will be used by the school to log in.
                    </span>
                </div>

                <div class="form-group">
                    <label class="form-label" for="contact_phone">
                        Contact Phone
                    </label>

                    <input
                        type="tel"
                        id="contact_phone"
                        name="contact_phone"
                        class="form-control"
                        placeholder="Enter contact number"
                        value="{{ request.form.get('contact_phone', '') }}"
                        maxlength="50"
                    >
                </div>

                <div class="form-group full-width">
                    <label class="form-label" for="contact_email">
                        Contact Email
                    </label>

                    <input
                        type="email"
                        id="contact_email"
                        name="contact_email"
                        class="form-control"
                        placeholder="Enter school's contact email"
                        value="{{ request.form.get('contact_email', '') }}"
                        maxlength="150"
                    >

                    <span class="field-help">
                        This is the school's contact email, not the login password.
                    </span>
                </div>

            </div>

            <div class="form-actions">

                <a
                    href="{{ url_for('admin_dashboard') }}"
                    class="btn-secondary"
                >
                    <i class="fa-solid fa-arrow-left"></i>
                    Cancel
                </a>

                <button type="submit" class="btn-primary">
                    <i class="fa-solid fa-school"></i>
                    Create School
                </button>

            </div>

        </form>

    </div>

</div>

{% endblock %}